<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天天生鲜</title>
    <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/detail.css">
    <style>

    </style>
</head>
<div class="top-nav">
    <ul class="row">
        <li>欢迎来到天天生鲜</li>
        <li class="space"></li>
        <li>登录</li>
        <li>|</li>
        <li>注册</li>
        <li>|</li>
        <li>用户中心</li>
        <li>|</li>
        <li>我的购物车</li>
        <li>|</li>
        <li>我的订单</li>
    </ul>
</div>

<body>
    <div class="main">
        <div class="top-search">
            <img src="./images/logo.png" alt="">
            <div class="serch-box">
                <input type="text" placeholder="请输入商品名称">
                <span>搜索</span>
            </div>
            <div class="cart-box">
                <div class="cart-text">我的购物车</div>
                <div class="cart-num">1</div>
            </div>
        </div>
        <div class="cate-titbox">
            <ul class="cate">
                <h2>全部商品</h2>
                <li>手机</li>
                <li>|</li>
                <li>生鲜</li>
                <li>|</li>
                <li>抽奖</li>
            </ul>
        </div>
        <div class="nav">
            <span>全部分类</span> <i></i> <span>新鲜水果</span> <i></i> <span>商品详情</span>
        </div>
        <div class="detail">
            <div class="row">
                <img src="./images/goods_detail.jpg" alt="">
                <div class="gd">
                    <div class="tit">大兴大棚草莓</div>
                    <p>草莓草莓可大可甜好吃勒很</p>
                    <div class="price-box">
                        <span>￥<font>16.80</font></span>
                        <span>单位:500g</span>
                    </div>
                    <div class="asn">
                        <label for="num">数量:</label>
                        <div class="in">
                            <input type="text" value="1">
                            <div class="as">
                                <span>+</span>
                                <span>-</span>
                            </div>
                        </div>
                    </div>
                    <div class="total">
                        总价:<span>16.80</span>
                    </div>
                    <div class="btns">
                        <button class="default">立即购买</button>
                        <button class="delete">加入购物车</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="left">
                    <div class="tit">冰激凌</div>
                    <div class="gad">
                        <img src="./images/banner06.jpg" alt="">
                        <div class="gad-tit">美味圣代</div>
                        <div class="des">￥33.99</div>
                    </div>
                    <div class="gad">
                        <img src="./images/banner03.jpg" alt="">
                        <div class="gad-tit">法式牛扒</div>
                        <div class="des">￥99.99</div>
                    </div>
                </div>
            <div class="right">
                <div class="tits">
                    <div class="title active">商品评价</div>
                    <div class="title">评价</div>
                </div>
                <div class="cons">
                    <div class="con">
                        商品详情
                    </div>
                    <div class="con">
                        评价内容
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <ul class="row">
            <li>关于我们</li>
            <li>|</li>
            <li>联系我们</li>
            <li>|</li>
            <li>招聘人才</li>
        </ul>
        <p>
            copyRighht&copy;2023 22级移动开发
        </p>
        <p>
            电话:139白酒啤酒葡萄酒;qq:1111111111@qq.com
        </p>
    </div>
</body>
<script src="../jquery-3.6.3.js"></script>
<script>
    $(document).ready(function(){
        $(".right .tits .title").click(function(){
            $(".right .tits .title").removeClass("active");
            $(this).addClass("active")
            let idx =$(this).index()
            $(".cons .con").hide();
            $($(".cons .con")[idx]).show();
        })
    })
</script>
</html>